<template>
  <div>
    <div class="main-nav">
    <router-link to="/index">首页</router-link>
    <router-link to="/classification">分类</router-link>
    <router-link to="/order">订单</router-link>
    <router-link to="/my">我的</router-link>
    </div>
    <h1>显示路由切换的页面↓</h1>
    <div class="main-banner">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "VueHomeworkApp",

  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style  scoped>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}
.main-nav a {
  text-decoration: none;
  flex:1;
  color:aliceblue;
  background-color:#c06f98 ;
}
.main-nav a.router-link-active{
  background-color: red;
}
.main-nav{
  text-align: center;
  width: 100%;
  display: flex;
}
</style>